<template>
  <view>
    <Layout>
      <view class="wrapper">
        <h3>修改密碼</h3>

        <form class="form_content">
          <div class="form_item">
            <label class="label">原密碼</label>
            <view class="input_wrapper">
              <input class="input_field" v-model="formData.oldPassword" placeholder="请输入您的原密碼"/>
            </view>
          </div>
          
          <div class="form_item">
            <label class="label">新密碼</label>
            <view class="input_wrapper">
              <input class="input_field" v-model="formData.password" placeholder="请输入您的新密碼"/>
            </view>
          </div>
          <div class="form_item">
            <button type="primary" class="submit_button" @click.prevent="handleSubmit">保存</button>
          </div>
        </form>
      </view>
    </Layout>
  </view>
</template>

<script>
import { updateUserPasswordApi, getUserInfo } from '@/api/user.js'
export default {
  data() {
    return {
      formData: {
        oldPassword: '',
        password: ''
      },
    };
  },
  methods: {
    validateEmail(oldPassword) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(String(oldPassword).toLowerCase());
    },
    showToast(message, icon = 'none') {
      uni.showToast({
        title: message,
        icon: icon, // 'success', 'loading', 'none'
        duration: 2000
      });
    },
    handleSubmit() {
      let valid = true;
      
      if (!this.formData.oldPassword || !this.formData.password) {
        this.showToast('密碼不能为空');
        valid = false;
      }
      if (valid) {
				uni.showLoading({ mask: true })
        updateUserPasswordApi(this.formData).then((res) => {
         this.showToast(res.message);
         for (var key in this.formData) {
          this.formData[key] = ''
         }
         	uni.hideLoading()
          uni.navigateTo({url : '/pages/dashboard/index'});
        }).catch((err) => {
          uni.hideLoading()
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped>
  .wrapper{
    padding: 60rpx 40rpx;
    margin-top: 160rpx;

    h3{
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      margin-bottom: 60rpx;
    }
    .form_content{
      .form_item{
        margin-bottom: 50rpx;
        .label{
          width: 100rpx;
          font-size: 30rpx;
          
        }
        .input_wrapper {
          margin-top: 20rpx;
          border: 1px solid #ddd;
          border-radius: 10rpx;
          margin-bottom: 30rpx;
          padding: 8rpx 20rpx;

          .input_field {
            height: 80rpx;
            font-size: 30rpx;
          }
        }
      }

    }
    
  }
</style>